<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--从域对象中回去content的内容-->
    <div th:text="${content}"></div>


    <hr />
    <h3>th:action</h3>
    <form th:action="@{http://localhost:8080/test/add}" method="post">
        <input type="text" name="username">

        <input type="submit" value="提交" />
    </form>
    提示信息：<span th:text="${msg}"></span>

    <h3>遍历</h3>
    <table>
        <tr>
            <th>序号</th>
            <th>名称</th>
            <th>地址</th>
        </tr>
        <!--user 表示迭代的每一个元素； us 表示每一行的状态，通过us.index可用获取遍历行的索引-->
        <tr th:each="user,us:${users}">
            <td th:text="${us.index + 1}"></td>
            <td th:text="${user.name}">名称</td>
            <td th:text="${user.address}"></td>
        </tr>

        <!--user 保存每一行数据-->
        <!--userStat  这个是由user + Stat组成，Stat是固定关键字，用来拼接字符串获取遍历行的状态-->
        <tr th:each="user:${users}">
            <td th:text="${userStat.index + 1}"></td>
            <td th:text="${user.name}">名称</td>
            <td th:text="${user.address}"></td>
        </tr>
    </table>

    <hr />
    <h3>遍历Map集合：th:each</h3>
    <div th:each="temp:${dataMap}">
        <div th:text="${temp.key} + '=' + ${temp.value}"></div>
    </div>
    <hr>
    <div th:text="${dataMap.flag}"></div>
    <div th:text="${dataMap.message}"></div>
    <div th:each="user:${dataMap.data}">
        <span th:text="${user.id}"></span>
        <span th:text="${user.name}"></span>
        <span th:text="${user.address}"></span> <br>
    </div>

    <h3>if判断</h3>
    <span th:if="${age>10}">显示内容</span>
</body>
</html>
<!--在js中，也可用使用thymeleaf的模板表达式：[[表达式]]-->
<script th:inline="javascript">
    let age = [[${age}]]
    //debugger
    console.log(age)
</script>